<template>
   <div class='footer'>
       <div class='nth-tar' v-for="(item,index) in tabnav" :key="item.id"
        @click="tabclick(index,item.title)">
          <i v-bind:class="[clickClass == index ? 'active':'',item.icon]" ></i>
          <span v-bind:class="clickClass == index ? 'active':''">{{item.text}}</span>
       </div>
   </div>
</template>
<script>
export default {
  data () {
    return {
      clickClass: 0,
      tabnav: [{
        'id': '0',
        'icon': 'iconfont icon-dingdan',
        'text': '订单',
        'title': '外卖订单'
      }, {
        'id': '1',
        'icon': 'iconfont icon-icon',
        'text': '跑腿',
        'title': '跑腿'
      }, {
        'id': '2',
        'icon': 'iconfont icon-ren',
        'text': '我的',
        'title': '我的'
      }]
    }
  },
  methods: {
    tabclick: function (idx, title) {
      this.clickClass = idx
      /**
       * $emit ('事件名称',携带参数)
       */
      this.$emit('listenToChild', title)
    }
  },
  mounted () {

  }
}
</script>
<style lang='stylus' scoped>
.footer
    width: 100%
    height: 1.4rem
    background: #ffffff
    display: flex
    flex-direction: row
    color: #666666
    align-items center
    .nth-tar
        display: flex
        flex-direction: column
        width 33%
        text-align center
        .iconfont
            font-size .45rem
            padding-bottom 0.1rem
        .active
            color #3fb24a
</style>
